<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜鸟教程(runoob.com)</title>
<style> 
#myDIV {
    margin: 25px;
    width: 550px;
    height: 100px;
    background: orange;
    position: relative;
    font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
</style>
</head>
<body>

<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<p><a href="https://www.runoob.com/jsref/event-animationiteration.html">原菜鸟 说明网址</a></p>
<div id="myDIV" onclick="myFunction()">点我开始动画,结束后可再次点击激活动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
    x.style.WebkitAnimation = "mymove 4s 1"; // Chrome, Safari 和 Opera 代码
    x.style.animation = "mymove 4s 1";
}
//  Chrome, Safari 和 Opera 使用的js代码
// x.addEventListener("webkitAnimationStart", myStartFunction);
//x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);

// animationstart - CSS 动画开始后触发
// x.addEventListener("animationstart", myStartFunction);

// animationiteration - CSS 动画重复播放时触发
//x.addEventListener("animationiteration", myIterationFunction);

// animationend - CSS 动画完成后触发
x.addEventListener("animationend", myEndFunction);

// 自定义的函数.用于查看不同annimation不同状态下显示.
function myStartFunction() {
    this.innerHTML = "animationstart 事件触发 - 动画已经开始";
    this.style.backgroundColor = "pink";
}
function myIterationFunction() {
    this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
    this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
   // this.innerHTML = "animationend 事件触发 - 动画已经完成";
   // this.style.backgroundColor = "lightgray";


   // 原理:清空animation的属性值.再重新赋值激活动画.
    x.style.WebkitAnimation = ""; // Chrome, Safari 和 Opera 代码
    x.style.animation = "";
}
</script>

</body>
</html>